<!DOCTYPE html>
<html>
<include file="Public:header" />
<link href="__ACSS__/dialog.css" rel="stylesheet">
<!-- jqgrid-->
<link href="__ACSS__/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
<style>
.purchase-box span{ cursor:pointer; margin:10px 10px 5px 0; border:1px solid #ddd; padding:3px 13px; border-radius:4px; float:left; background:#fff; font-size:16px; position:relative;}
.purchase-box span:hover,.purchase-box span.on{ border:1px solid #777; background:#eee;}
.purchase-box span:active{ border:1px solid #666; background:#d1d1d1;}
.purchase-box span i{ display:none;}
.purchase-box span.on i{ display:block; position:absolute; bottom:0; right:1px; font-size:0.7em; color:#777;}
.purchase-box{ background:#f7f7f9; border:1px solid #e1e1e8; border-radius:4px; margin:0 0 20px 0; padding-top:10px; padding-bottom:15px;}
.wrapper{ padding-bottom:60px;}
</style>
<body>
    <div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-content">
                    	<div class="ibox-search-box" style="border-bottom:0; margin:0; padding:0">
                    		<div class="row">
	                    		<div class="infont col-md-4">
		                    		<input type="text" name="name" class="form-control" placeholder="产品名">
								</div>
								<div class="infont col-md-4">
									<select name="type_id" class="form-control" placeholder="类型">
										<option value="0">请选择</option>
										<foreach name="types" item="types">
											<option value="<{$types.id}>"><{$types.name}></option>
										</foreach>
									</select>
								</div>
	                    		<div class="infont col-md-4">
	                    			<button class="btn btn-success btn-block btn-ibox-search" type="button">搜索</button>
	                    		</div>
                    		</div>
                    	</div>
                        <div class="jqGrid_wrapper">
                            <table id="table_list"></table>
                            <div id="pager_list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<div class="clearfix"></div>
    </div>
    <div class="footer-bar">
    	<div class="clearfix">
			<button type="button" id="submit-btn" class="btn btn-success btn-block">提交</button>
		</div>
    </div>
</body>
<!-- 全局js -->
<include file="Public:foot" />
<!-- jqGrid -->
<script src="__AJSPLUGINS__/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="__AJSPLUGINS__/jqgrid/jquery.jqGrid.min.js?0820"></script>
<script type="text/javascript">
$(function(){
	//初始化
    $.jgrid.defaults.styleUI = 'Bootstrap';
    $("#table_list").jqGrid({
    	url : '__URL__/getProductAllData',
    	datatype: "json",
        height: 300,
        autowidth: true,
        shrinkToFit: true,
        rowNum: 8,
        rowList: [8, 15, 30, 50],
        colNames: ['ID', '产品名称', '类别'],
        colModel: [ {name : 'id',index : 'id'},
                    {name : 'name',index : 'name'},
                    {name : 'type_name',index : 'type_name'}
        		],
        pager: "#pager_list",
        viewrecords: true,
        hidegrid: false,
        sortname: "seq",
    });

    //搜索
    $(".btn-ibox-search").click(function() {
    	result = getSearchParamByInput();
    	$("#table_list").jqGrid('setGridParam', { 
    		page: 1,
    		url : '__URL__/getProductAllData' + result
    	}).trigger("reloadGrid");
    })
    //监控回车
    $(".ibox-search-box").find(":input").keydown(function(event) {
		if(event.keyCode == 13){
			$(".btn-ibox-search").trigger("click");
		}
	})
    
    //获取搜索条件（仅限封装简单条件）
    function getSearchParamByInput() {
    	var result = "";
    	$(".ibox-search-box").find(":input").each(function() {
    		if($(this).val() != "") {
    			if(result != "") {
    				result += "&";
    			}else{
    				result += "?";
    			}
    			result += $(this).attr("name") + "=" + $(this).val();
    		}
    	})
    	return result;
    }
	
 	// 设置按钮
    $("#table_list").jqGrid('navGrid', '#pager_list', {
        edit: false,
        add: false,
        del: false,
        search: false
    }, {
        height: 200,
        reloadAfterSubmit: true
    });
    // 添加适配响应
    $(window).bind('resize', function () {
        var width = $('.jqGrid_wrapper').width();
        $('#table_list').setGridWidth(width);
    });

	
	$("#submit-btn").click(function(){
		var rowId = $("#table_list").jqGrid('getGridParam','selrow');
    	var rowDatas = $("#table_list").jqGrid('getRowData', rowId);
    	var id = rowDatas['id'];
    	var title = rowDatas['name'];
    	if(id != null) {
    		var str = id+"_"+title;
    		var index = parent.layer.getFrameIndex(window.name);
    		parent.getPurchase(str);
    		parent.layer.close(index);
    	}else {
    		layer.msg("您没有选取数据！");
    	}
	})
})
</script>
</html>